<div class="relative z-10 rounded-2xl bg-white shadow-xl ring-1 ring-gray-900/10">
    <div class="p-8 lg:pt-12 xl:p-10 xl:pt-14">
        <h3 id={"#{@plan.id}-plan"} class="text-sm font-semibold leading-6 text-gray-900"><%= @plan.name %></h3>
        <div class="flex flex-col gap-6 sm:flex-row sm:items-end sm:justify-between lg:flex-col lg:items-stretch">
            <div class="mt-2 flex items-center gap-x-4">
                <p class="text-4xl font-bold tracking-tight text-gray-900" x-text={"annual ? '#{@plan.yearly}' : '#{@plan.monthly}'"}><%= @plan.yearly %></p>
                <%= if is_number(@plan.yearly) do %>
                <div class="text-sm leading-5">
                    <p class="text-gray-900"><%= @plan.unit %></p>
                    <p class="text-gray-500" x-text="annual ? 'Billed annually' : 'Billed monthly'">Billed annually</p>
                </div>
                <% end %>
            </div>
            <a href={@sub.(@plan.id, "yearly")} x-bind:href={"annual ? '#{@sub.(@plan.id, "yearly")}' : '#{@sub.(@plan.id, "monthly")}'"} aria-describedby={"#{@plan.id}-plan"} class="rounded-md bg-indigo-600 px-3 py-2 text-center text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"><%= @cta %></a>
        </div>
        <div class="mt-8 flow-root sm:mt-10">
            <ul role="list" class="-my-2 divide-y divide-gray-900/5 border-t border-gray-900/5 text-sm leading-6 text-gray-600 lg:border-t-0">
                <%= for feature <- @plan.features do %>
                <li class="flex gap-x-3 py-2">
                    <svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                        <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                    </svg>
                    <%= feature %>
                </li>
                <% end %>
            </ul>
        </div>
    </div>
</div>
